import React, {Component} from 'react';

class HookComponent extends Component {

    constructor() {
        super();
        this.state  = {
            counter:100,
            list:[
                {
                    id:122,
                    name:'兔子'
                },
                {
                    id:122,
                    name:'兔子'
                },
                {
                    id:122,
                    name:'兔子'
                },
                {
                    id:122,
                    name:'兔子'
                },
            ]
        }
    }

    clickHandle = ()=>{
        this.setState({
            counter:222
        })
    }




    render() {
        const { counter ,list } = this.state
        return (
            <div>
                <h3>Class形式</h3>
                <div>
                    <button onClick={this.clickHandle}>修改</button>
                    <p>Counter:{counter}</p>
                </div>
                <ul>
                    {
                        list.map((ele,index) =>{
                            return <li key={index} >{ele.name}</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}




export default HookComponent;
